<template>
  <div>
    <div>
      <button v-on:click='refreshCharts()'>刷新</button>
      <div class='line' id='line'></div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import axios from 'axios'
export default {
  name: 'ChartLine',
  computed: {
    opt () {
      return {
        title: { text: '堆叠图区域' },
        tooltip: {},
        legend: { data: ['邮件营销'] },
        grid: {},
        xAxis: [{ data: [] }],
        yAxis: [],
        series: [{ name: '邮件营销', type: 'line', data: [] }]
      }
    }
  },
  methods: {
    async refreshCharts () {
      const res = await axios.get('/api/line')
      console.log(res.data.legend_data)
      console.log(res.data.xAxis_data)
      this.myChart.setOption({
        xAxis: { data: res.data.legend_data },
        series: { data: res.data.xAxis_data }
      })
    }
  },
  mounted () {
    this.myChart = echarts.init(document.getElementById('line'))
    this.myChart.setOption(this.opt)
    window.addEventListener('resize', this.myChart.resize)
  }
}
</script>

<style>
.line {
  width: 400px;
  height: 200px;
  margin: 20px auto;
}
</style>
